<template>
  <div class="site_login">
    <background-particles/>
    <div class="login_container">
      <div class="system_title"><strong> Ranyk 后台管理系统</strong> <em>Ranyk Management System</em></div>
      <div class="login_txt_input">
        <el-input prefix-icon="fa fa-user" v-model="loginData.loginName" name="loginName"
                  placeholder="请输入账号"></el-input>
      </div>
      <div class="login_txt_input">
        <el-input prefix-icon="fa fa-key fa-fw" type="password" v-model="loginData.loginPassword" name="loginPassword"
                  placeholder="请输入密码"></el-input>
      </div>
      <div class="login_txt_input">
        <el-input class="register_code" prefix-icon="fa fa-photo" v-model="loginData.registerCode" name="registerCode"
                  maxlength="4" placeholder="验证码"/>
        <img class="j_code_img" :src="img" id="kaptchaImage" alt=""/>
      </div>
      <div class="login_bt">
        <el-button class="submit_btn" type="primary" @click="login" :loading="loading" round>立即登陆</el-button>
      </div>
      <div>
        <p>© 2022 Ranyk 版权所有</p>
        <p><span>{{ showSecTime }}</span></p>
      </div>
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie"
import Utils from '@/utils/Utils'
import BackgroundParticles from '@/components/BackgroundParticles'


export default {
  name: 'Login',
  components: {
    BackgroundParticles
  },
  data() {
    return {
      loginData: {
        loginName: "",
        loginPassword: "",
        registerCode: ""

      },
      img: "",
      showSecTime: "",
      firstShowTime: true,
      loading: false
    }
  },
  mounted() {
    this.getImage();
    this.getShowTime();

  },
  methods: {
    getImage() {
      this.img = this.global.baseUrl + '/captcha-image';
    },
    login() {
      this.loading = true;
      let loginData = this.loginData;
      let verifyResult = this.verifyLoginInfo(loginData);
      if (verifyResult) {
        let user = {
          loginName: loginData.loginName,
          loginPassword: loginData.loginPassword,
          registerCode: loginData.registerCode
        }
        this.$api.login.login(user)
          .then(res => {
            if (res.code !== 200) {
              this.$message({message: res.message, type: 'error'})
              this.$router.push('/')
            } else {
              // 放置token到Cookie
              Cookies.set('token', res.data.token)
              // 保存用户到本地会话
              sessionStorage.setItem('user', res.data.loginName)
              // 登录成功，跳转到主页
              this.$router.push('/home')
            }
          })
          .catch(res => {
            this.$message({message: res.message, type: 'error'})
            this.$router.push('/')
          })
      }
      this.loading = false;
    },
    verifyLoginInfo(data) {
      let loginName = data.loginName;
      let loginPassword = data.loginPassword;
      let registerCode = data.registerCode;
      if (Utils.isNull(loginName)) {
        this.$message('用户名不能为空');
        return false;
      }
      if (Utils.isNull(loginPassword)) {
        this.$message('用户密码不能为空');
        return false;
      }
      if (Utils.isNull(registerCode)) {
        this.$message('验证码不能为空');
        return false;
      }
      return true;
    },
    getShowTime() {
      this.showSecTime = Utils.getShowSecTime();
      if (this.firstShowTime) {
        setInterval(() => {
          this.showSecTime = Utils.getShowSecTime();
        }, 1000);
        this.firstShowTime = false;
      }

    }
  }
}
</script>

<style scoped lang="scss">
.site_login {
  width: 100%;
  height: 100%;
  background: #16a085;

  .login_container {
    width: 300px;
    height: auto;
    overflow: hidden;
    margin-top: -40%;
    margin-left: 38%;
    padding: 2%;
    box-shadow: 0 -15px 30px #0d957a;
    border-radius: 5px;

    .system_title {
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      color: #45bda6;
      text-shadow: 0 0 1px #0e947a;
      margin-bottom: 15px;

      strong {
        display: block;
      }

      em {
        display: block;
        font-size: 12px;
        margin-top: 8px;
      }
    }

    .login_txt_input {
      width: 245px;
      margin-left: 25px;

      .register_code {
        width: 159px;
        float: left;
      }

      .j_code_img {
        width: 85px;
        height: 40px;
        padding-top: 4px;
      }
    }

    .login_bt {
      margin-top: 18px;
    }

    div {
      margin: 5px 0;
      height: 43px;
      position: relative;

      :last-child {
        height: 50px;
      }
    }
  }
}
</style>
